<template>
  <div id="app">
    <template v-for=" item in detailArr ">
    <div id="container" :key="item.id" v-if="item.id==$route.query.destId">
      <div class="row row-placeTop row-bg">
        <div class="wrapper">
          <div class="extra">
            <div class="action">
              <a
                href="javascript:void(0)"
                _iswg="0"
                _mddid="14674"
                data-act="want_go"
                class="btn-collect"
                >收藏</a
              >
              <a
                href="javascript:void(0)"
                _ispa="0"
                _mddid="14674"
                data-act="set_path"
                class="btn-been"
                ><i class="icon"></i>去过</a
              >
            </div>
          </div>
          <div class="crumb">
            <div class="item">
              <a href="./destination.html">目的地</a><em>&gt;</em>
            </div>
            <div class="item">
              <a href="./destination_detail.html?id=5e2ab4f48847000059006e10"
                >中国</a
              ><em>&gt;</em>
            </div>
            <div class="item">
              <a href="./destination_detail.html?id=5e2ab4f48847000059006e2f"
                >{{item.name}}</a
              ><em>&gt;</em>
            </div>
            <div class="item">
              <div class="drop">
                <span class="hd"
                  ><a href="javascript:;">{{item.name}}<i></i></a
                ></span>
                <div class="bd">
                  <i class="arrow"><b></b></i>
                  <div class="col">
                    <ul class="clearfix">
                      <li>
                        <a href="JavaScript:;" target="_blank">{{item.name}}概括</a>
                      </li>
                      <li>
                        <a
                          href="./destination_detail.html?id=5e2ab4f48847000059006f11#travel"
                          target="_blank"
                          >{{item.name}}游记</a
                        >
                      </li>
                      <li>
                        <a
                          href="./destination_detail.html?id=5e2ab4f48847000059006f11#strategy"
                          target="_blank"
                          >{{item.name}}攻略</a
                        >
                      </li>
                      <li>
                        <a href="javascript:;" target="_blank">{{item.name}}跟团游</a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
              <em>&gt;</em>
            </div>
            <div class="item cur"><strong>{{item.name}}概览</strong></div>
          </div>
          <div class="title" style="position: relative">
            <h1>{{item.name}}</h1>
            <a href="javascript:;" target="_blank" class="num-photo"></a> <br />
            <span class="en">{{ item.english }}</span>
            <div style="position: absolute; top: 3px; right: 220px">
              <img
                src="../assets/images/wKgED1v-df2Ab5KFAAFioLPYatQ535.png"
                style="width: 390px"
              />
            </div>
          </div>
          <div class="place-navbar" style="border-top: 0px">
            <div class="navbar-con">
              <ul class="navbar clearfix navbar-first-level-warper">
                <li class="navbar-overview city-guide">
                  <a href="javascript:;" class="navbar-btn"
                    ><i class="navbar-icon"></i><span>概况</span></a
                  >
                </li>
                <li class="navbar-line">
                  <a
                    href="./destination_detail.html?id=5e2ab4f48847000059006f11#travel"
                    class="navbar-btn"
                    ><i class="navbar-icon"></i><span>游记</span></a
                  >
                </li>
                <li class="navbar-line">
                  <a
                    href="./destination_detail.html?id=5e2ab4f48847000059006f11#strategy"
                    class="navbar-btn navbar-local"
                    ><i class="navbar-icon"></i><span>攻略</span></a
                  >
                </li>
                <li class="navbar-line">
                  <a href="javascript:;" class="navbar-btn navbar-sales"
                    ><i class="navbar-icon"></i><span>跟团游</span></a
                  >
                </li>
              </ul>
              <div
                class="overview-drop hide"
                style="height: auto; overflow: hidden"
              >
                <div class="drop-bd"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="pagelet-block">
        <div class="row row-local row-bg">
          <div class="wrapper">
            <h2 class="r-title">
              <a href="javascript:;" name="strategy">{{item.name}}攻略</a>
            </h2>
            <div class="local-pro">
              <ul class="clearfix" ></ul>
            </div>
            <div class="r-more">
              <a href="./strategy_index.html" target="_blank">查看全部</a>
            </div>
          </div>
        </div>
      </div>
      <div class="pagelet-block">
        <div class="row row-travels">
          <div class="wrapper">
            <div class="navbar clearfix">
              <ul class="tn-nav">
                <li class="active">
                  <h2 class="r-title">
                    <a href="javascript:;" name="travel">{{item.name}}游记</a>
                  </h2>
                </li>
              </ul>
            </div>
            <div class="relcontent yj" style="display: block">
              <form id="travelForm">
                <div class="navbar-sub clearfix">
                  排序：
                  <select name="orderType" class="com-opt">
                    <option value="1">最新</option>
                    <option value="2">最热</option>
                  </select>

                  人均花费：
                  <select name="perExpendType" class="com-opt">
                    <option value="-1">不限</option>
                    <option value="1">1-999</option>
                    <option value="2">1K-6K</option>
                    <option value="3">6K-20K</option>
                    <option value="4">20K以上</option>
                  </select>

                  出行天数：
                  <select name="dayType" class="com-opt">
                    <option value="-1">不限</option>
                    <option value="1">3天以下</option>
                    <option value="2">4-7天</option>
                    <option value="3">8-14天</option>
                    <option value="4">15天以上</option>
                  </select>
                </div>
              </form>
              <div class="_notelist">
                <div id="travelPage" class="tn-list">
                  <br /><br />
                  <div style="float: right">
                    <div style="float: left">
                      <span style="line-height: 30px">
                        共1页 / 0条&nbsp;&nbsp;&nbsp;</span
                      >
                    </div>
                    <div
                      id="pagination"
                      class="jq-pagination"
                      style="display: inline"
                    >
                      <a
                        class="prev disabled"
                        href="javascript:void(0);"
                        jp-role="prev"
                        jp-data="0"
                        >上一页</a
                      ><a
                        href="javascript:void(0);"
                        jp-role="page"
                        jp-data="1"
                        class="active"
                        >1</a
                      ><a
                        class="next disabled"
                        href="javascript:void(0);"
                        jp-role="next"
                        jp-data="2"
                        >下一页</a
                      ><a
                        class="last disabled"
                        href="javascript:void(0);"
                        jp-role="last"
                        jp-data="1"
                        >尾页</a
                      >
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="pagelet-block">
        <div class="row row-placeList">
          <div class="wrapper">
            <h2 class="r-title">{{item.name}}周边【拓展】</h2>
            <div class="bd">
              <ul class="clearfix">
                <li class="item">
                  <div class="img">
                    <img
                      height="200"
                      width="320"
                      src="../assets/images/wKgB3FGMgSCAZo0qAAgGckFTqJA54.jpeg"
                      class="lazy"
                      style="display: inline"
                    />
                  </div>
                  <dl class="caption">
                    <dt>
                      <a href="javascript:;" target="_blank"
                        ><strong>香港</strong><br /><b>40576</b>人去过</a
                      >
                    </dt>
                    <dd>
                      <a href="javascript:;" target="_blank">香港迪士尼乐园</a>
                      <span class="divide"></span>
                      <a href="javascript:;" target="_blank">太平山顶</a>
                      <span class="divide"></span>
                      <a href="javascript:;" target="_blank">香港海洋公园</a>
                    </dd>
                  </dl>
                </li>
                <li class="item">
                  <div class="img">
                    <a href="javascript:;" target="_blank"
                      ><img
                        height="200"
                        width="320"
                        src="../assets/images/wKgB3FECAVCANTk_AAWNVF8sjYw25.jpeg"
                        class="lazy"
                        style="display: inline"
                    /></a>
                  </div>
                  <dl class="caption">
                    <dt>
                      <a href="javascript:;" target="_blank"
                        ><strong>深圳</strong><br /><b>33108</b>人去过</a
                      >
                    </dt>
                    <dd>
                      <a href="javascript:;" target="_blank">东部华侨城</a>
                      <span class="divide"></span>
                      <a href="javascript:;" target="_blank">西涌海滩</a>
                      <span class="divide"></span>
                      <a href="javascript:;" target="_blank">世界之窗</a>
                    </dd>
                  </dl>
                </li>
                <li class="item">
                  <div class="img">
                    <a href="javascript:;" target="_blank"
                      ><img
                        height="200"
                        width="320"
                        src="../assets/images/wKgB6lP0VpCADPDPAAPICO-I-Iw57.jpeg"
                        class="lazy"
                        style="display: inline"
                    /></a>
                  </div>
                  <dl class="caption">
                    <dt>
                      <a href="javascript:;" target="_blank"
                        ><strong>珠海</strong><br /><b>17660</b>人去过</a
                      >
                    </dt>
                    <dd>
                      <a href="javascript:;" target="_blank"
                        >珠海长隆海洋王国</a
                      >
                      <span class="divide"></span>
                      <a href="javascript:;" target="_blank">外伶仃岛</a>
                      <span class="divide"></span>
                      <a href="javascript:;" target="_blank">情侣路</a>
                    </dd>
                  </dl>
                </li>
                <li class="item">
                  <div class="img">
                    <a href="javascript:;" target="_blank"
                      ><img
                        height="200"
                        width="320"
                        src="../assets/images/wKgB4lIlVk6AIMCDAAStueA6sSU73.jpeg"
                        class="lazy"
                        style="display: inline"
                    /></a>
                  </div>
                  <dl class="caption">
                    <dt>
                      <a href="javascript:;" target="_blank"
                        ><strong>惠州</strong><br /><b>7214</b>人去过</a
                      >
                    </dt>
                    <dd>
                      <a href="javascript:;" target="_blank">双月湾</a>
                      <span class="divide"></span>
                      <a href="javascript:;" target="_blank">巽寮湾</a>
                      <span class="divide"></span>
                      <a href="javascript:;" target="_blank">惠州西湖</a>
                    </dd>
                  </dl>
                </li>
                <li class="item">
                  <div class="img">
                    <a href="javascript:;" target="_blank"
                      ><img
                        height="200"
                        width="320"
                        src="../assets/images/wKgB6lRZ5s6ARJzuAAjCwdIPcK865.jpeg"
                        class="lazy"
                        style="display: inline"
                    /></a>
                  </div>
                  <dl class="caption">
                    <dt>
                      <a href="javascript:;" target="_blank"
                        ><strong>佛山</strong><br /><b>9649</b>人去过</a
                      >
                    </dt>
                    <dd>
                      <a href="javascript:;" target="_blank">顺德清晖园</a>
                      <span class="divide"></span>
                      <a href="javascript:;" target="_blank">佛山祖庙</a>
                      <span class="divide"></span>
                      <a href="javascript:;" target="_blank">岭南天地</a>
                    </dd>
                  </dl>
                </li>
                <li class="item">
                  <div class="img">
                    <a href="javascript:;" target="_blank"
                      ><img
                        height="200"
                        width="320"
                        src="../assets/images/wKgB3FIMRvaAdrjoAAGCmIetJvQ75.jpeg"
                        class="lazy"
                        style="display: inline"
                    /></a>
                  </div>
                  <dl class="caption">
                    <dt>
                      <a href="javascript:;" target="_blank"
                        ><strong>韶关</strong><br /><b>6248</b>人去过</a
                      >
                    </dt>
                    <dd>
                      <a href="javascript:;" target="_blank">丹霞山</a>
                      <span class="divide"></span>
                      <a href="javascript:;" target="_blank">广东大峡谷</a>
                      <span class="divide"></span>
                      <a href="javascript:;" target="_blank">南华禅寺</a>
                    </dd>
                  </dl>
                </li>
                <li class="item">
                  <div class="img">
                    <a href="javascript:;" target="_blank"
                      ><img
                        height="200"
                        width="320"
                        src="../assets/images/wKgB4lMO9uuAbh9fAAKP4vgV8Os70.jpeg"
                        class="lazy"
                        style="display: inline"
                    /></a>
                  </div>
                  <dl class="caption">
                    <dt>
                      <a href="javascript:;" target="_blank"
                        ><strong>东莞</strong><br /><b>10353</b>人去过</a
                      >
                    </dt>
                    <dd>
                      <a href="javascript:;" target="_blank">下坝坊</a>
                      <span class="divide"></span>
                      <a href="javascript:;" target="_blank">松山湖风景区</a>
                      <span class="divide"></span>
                      <a href="javascript:;" target="_blank">可园博物馆</a>
                    </dd>
                  </dl>
                </li>
                <li class="item">
                  <div class="img">
                    <a href="javascript:;" target="_blank"
                      ><img
                        height="200"
                        width="320"
                        src="../assets/images/wKgB4lMNziCASS7YAADtzNGSAUU44.jpeg"
                        class="lazy"
                        style="display: inline"
                    /></a>
                  </div>
                  <dl class="caption">
                    <dt>
                      <a href="javascript:;" target="_blank"
                        ><strong>中山</strong><br /><b>8276</b>人去过</a
                      >
                    </dt>
                    <dd>
                      <a href="javascript:;" target="_blank"
                        >孙中山故居纪念馆</a
                      >
                      <span class="divide"></span>
                      <a href="javascript:;" target="_blank"
                        >中山城-中山影视城</a
                      >
                      <span class="divide"></span>
                      <a href="javascript:;" target="_blank">中山詹园</a>
                    </dd>
                  </dl>
                </li>
                <li class="item">
                  <div class="img">
                    <a href="javascript:;" target="_blank"
                      ><img
                        height="200"
                        width="320"
                        src="../assets/images/wKgBEFqTegaAGG-GAAgeDCxhmAQ61.jpeg"
                        class="lazy"
                        style="display: inline"
                    /></a>
                  </div>
                  <dl class="caption">
                    <dt>
                      <a href="javascript:;" target="_blank"
                        ><strong>肇庆</strong><br /><b>8276</b>人去过</a
                      >
                    </dt>
                    <dd>
                      <a href="javascript:;" target="_blank">肇庆大山</a>
                      <span class="divide"></span>
                      <a href="javascript:;" target="_blank">肇庆影视城</a>
                      <span class="divide"></span>
                      <a href="javascript:;" target="_blank">詹园</a>
                    </dd>
                  </dl>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    </template>
  </div>
</template>

<script>
import { ApiDestinationsToasts } from "../request/api";
export default {
  data() {
    return {
      //目的地详情页数据
      detailArr: [],
    };
  },
  async created() {
    //目的地详情页请求
    let res = await ApiDestinationsToasts(this.$route.query.destId);
    //判断请求是否成功
    if (res.code !== 200) {
      alert("请求失败");
      return;
    }
    this.detailArr = res.data;
    console.log(res);
  },
};
</script>

<style lang="less" scoped>
.row {
  padding: 40px 0;
  min-width: 980px;
  border-bottom: 1px solid #e4e4e4;
}

a:hover {
  outline: 0;
  text-decoration: underline;
  color: #ff8a00;
}

.row-bg {
  background-color: #fafafa;
}

.row-placeTop {
  padding: 0;
  background-color: #fafafa;
}

.tn-item:hover dt a {
  color: #ff9d00;
  text-decoration: none;
}

.tn-item dd a:hover {
  text-decoration: none;
  color: #666;
}

.wrapper {
  width: 1000px;
  margin: 0 auto;
}

.row-placeTop .extra {
  float: right;
  padding-top: 10px;
  text-align: right;
  position: relative;
  z-index: 2;
}

.row a {
  color: #643718;
}

.row-placeTop .action {
  margin-top: 25px;
}

.row-placeTop .btn-collect,
.row-placeTop .btn-been {
  display: inline-block;
  height: 30px;
  margin-left: 20px;
  color: #333;
  line-height: 15px;
  vertical-align: top;
  line-height: 30px;
  font-size: 14px;
}

.row-placeTop .icon {
  float: left;
  margin-right: 10px;
  width: 30px;
  height: 30px;
  background: url(../assets/images/poiV3-sprite6.png) no-repeat -230px 0;
  overflow: hidden;
}

.row-placeTop .btn-been .icon {
  background-position: -230px -30px;
}

.crumb {
  height: 20px;
  padding: 15px 0;
  color: #666;
  font-size: 12px;
  line-height: 20px;
}

.crumb {
  width: 1000px;
  font: 12px Arial, "Microsoft Yahei", "\5FAE\8F6F\96C5\9ED1", Tahoma, Helvetica,
    STHeiti, "Hiragino Sans GB";
  height: 20px;
  padding: 15px 0;
  color: #666;
  line-height: 20px;
  margin: 0 auto;
}

.crumb .item {
  float: left;
}

.crumb .item.cur {
  color: #ff7000;
}

.crumb .item a {
  color: #666;
  font-size: 12px;
}

.crumb .item em {
  margin: 0 6px;
  color: #999;
  font-family: "simsun";
  font-style: normal;
}

.crumb .drop {
  float: left;
}

.crumb .drop .hd {
  height: 20px;
}

.crumb .drop .bd {
  position: absolute;
  display: none;
  margin: 5px 0 0 -10px;
  _margin: 20px 0 0 -70px;
  z-index: 20;
  padding: 10px 0 8px 7px;
  background-color: #fff;
  border: 1px solid #e5e5e5;
}

.crumb .drop .hd a {
  display: block;
  height: 20px;
  _float: left;
  padding: 0 13px 0 5px;
}

.crumb .drop .hd i {
  position: absolute;
  margin: 8px 0 0 3px;
  width: 0;
  height: 0;
  border-top: 3px solid #ff7000;
  border-left: 3px dashed transparent;
  border-right: 3px dashed transparent;
  overflow: hidden;
  font-size: 0;
}

.crumb .drop .bd .arrow {
  position: absolute;
  left: 20px;
  top: -6px;
  width: 0;
  height: 0;
  border-bottom: 6px solid #e5e5e5;
  border-left: 6px dashed transparent;
  border-right: 6px dashed transparent;
  font-size: 0;
}

.crumb .drop .col {
  float: left;
  width: 145px;
}

.crumb .drop .more {
  clear: both;
  padding: 10px 20px 0 0;
  text-align: right;
}

.crumb .drop .bd .arrow b {
  position: absolute;
  left: -6px;
  top: 2px;
  width: 0;
  height: 0;
  border-bottom: 6px solid #fff;
  border-left: 6px dashed transparent;
  border-right: 9px dashed transparent;
  font-size: 0;
  overflow: hidden;
}

.crumb .drop h3 {
  padding-left: 7px;
  color: #333;
}

.crumb .drop li {
  float: left;
  display: inline;
  width: 137px;
  margin: 4px 8px 0 0;
  height: 21px;
  line-height: 20px;
  overflow: hidden;
}

.crumb .drop li a {
  display: block;
  height: 21px;
  padding: 0 7px;
  color: #333;
}

.crumb .drop .more {
  clear: both;
  padding: 10px 20px 0 0;
  text-align: right;
}

.crumb .drop .more a {
  color: #ff7000;
}

.crumb .drop.open .bd {
  display: block;
}

.crumb .drop li a:hover,
.crumb .drop li.on a {
  background-color: #fff1d7;
  color: #ff7000;
  text-decoration: none;
}

.row-placeTop .title {
  margin: 0 0 20px;
}

.row-placeTop h1 {
  display: inline;
  margin-right: 15px;
  font-weight: normal;
  font-size: 40px;
  color: #333;
}

.row-placeTop .num-photo {
  color: #999;
  font-size: 14px;
}

.row-placeTop .en {
  font-size: 20px;
  color: #999;
}

.row-placeTop .num-photo em {
  font-style: normal;
  color: #ff9d00;
}

.place-navbar {
  height: 75px;
  border-top: 1px solid #ededed;
  border-bottom: 1px solid #ededed;
}

.row-placeTop .place-navbar {
  margin-bottom: 0;
  border-bottom: 0;
  z-index: 1001;
}

.place-navbar .navbar-con {
  width: 1000px;
  margin: 0 auto;
}

.place-navbar li[class|="navbar"] {
  float: left;
  display: inline;
  margin-right: 18px;
  font-size: 16px;
  line-height: 32px;
}

.place-navbar .navbar-btn {
  display: block;
  height: 32px;
  padding: 20px 0 23px;
  color: #666;
  font-size: 14px;
  line-height: 32px;
  position: relative;
}

.place-navbar .navbar-icon {
  float: left;
  width: 32px;
  height: 32px;
  margin-right: 6px;
  background: url(../assets/images/icon-place-nav6.png) no-repeat;
  overflow: hidden;
}

.navbar-overview .navbar-icon {
  background-position: 0 0;
}

.navbar-line .navbar-icon {
  background-position: 0 -40px;
}

.navbar-local .navbar-icon {
  background-position: 0 -200px;
}

.navbar-sales .navbar-icon {
  background-position: 0 -160px;
}

.navbar-scenic .navbar-icon {
  background-position: 0 -320px;
}

.navbar-hotels .navbar-icon {
  background-position: 0 -120px;
}

.overview-drop {
  position: absolute;
  margin-top: 7px;
  z-index: 1001;
  width: 798px;
  border: 1px solid #e5e5e5;
  background-color: #fff;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);
}

.hide {
  display: none;
}

.overview-drop .drop-bd {
  padding: 30px 50px;
}

.overview-drop .drop-bd dl {
  padding-left: 125px;
  line-height: 36px;
}

.overview-drop .drop-bd dt {
  float: left;
  display: inline;
  margin: 0 0 0 -125px;
  width: 96px;
  color: #654939;
  font-size: 16px;
  height: 36px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-drop .drop-bd dd {
  font-size: 14px;
  color: #333;
}

.overview-drop .drop-bd dt a {
  color: #333;
}

.overview-drop .drop-bd dd a {
  float: none;
  height: auto;
  color: #333;
}

.overview-drop .drop-bd dd span {
  display: inline-block;
  width: 1px;
  height: 10px;
  margin: 0 13px;
  background-color: #ddd;
  vertical-align: middle;
  overflow: hidden;
  line-height: 100px;
}

.place-navbar-fixed {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  width: 100%;
  background-color: #fff;
  z-index: 100;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
}

.row-bg {
  background-color: #fafafa;
}

.wrapper {
  width: 1000px;
  margin: 0 auto;
}

.row-local .r-title {
  margin-bottom: 30px;
  text-align: left;
  font-size: 26px;
  color: #333;
  font-weight: normal;
  line-height: 30px;
}

.row-local .r-more {
  clear: both;
  margin-top: 25px;
  text-align: center;
}

.local-pro ul {
  margin-right: -40px;
}

.local-pro li {
  float: left;
  width: 310px;
  display: inline;
  margin-right: 35px;
}

.local-pro .img {
  display: block;
  margin-bottom: 10px;
  height: 170px;
  overflow: hidden;
  position: relative;
}

.local-pro p {
  padding-left: 12px;
  font-size: 14px;
  color: #666;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.local-pro p:before {
  content: "";
  float: left;
  margin: 5px 0 0 -12px;
  display: inline-block;
  width: 2px;
  height: 10px;
  background-color: #ff9d00;
}

.local-pro .more {
  margin-top: 15px;
  border-top: 1px dashed #ebebeb;
  padding-top: 15px;
  text-align: center;
  font-size: 14px;
  line-height: 20px;
}

.a-link {
  display: inline-block;
  font-size: 14px;
  position: relative;
  padding-right: 15px;
  color: #ff9d00 !important;
}

.icon-link {
  position: absolute;
  right: 0;
  top: 4px;
  display: inline-block;
  width: 13px;
  height: 13px;
  //   background: url(../assets/images/place-sprite8.png) no-repeat -45px 0;
  overflow: hidden;
}

.row-local .r-more a {
  display: inline-block;
  border: 1px solid #ff9d00;
  border-radius: 4px;
  font-size: 14px;
  line-height: 40px;
  padding: 0 42px;
  color: #ff9d00;
}

.local-pro .title {
  margin-bottom: 5px;
  display: block;
  width: 320px;
  height: 28px;
  line-height: 28px;
  font-size: 18px;
  color: #000;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.local-pro .title:hover {
  color: #ff9d00;
}

.local-pro .mark {
  position: absolute;
  left: 0;
  top: 10px;
  height: 30px;
  padding: 0 10px;
  background-color: #ff6262;
  line-height: 30px;
  color: #fff;
}

.local-pro .mark:after {
  content: "";
  position: absolute;
  top: 0;
  right: -10px;
  border-top: 15px solid #ff6262;
  border-right: 10px dashed transparent;
  border-bottom: 15px solid #ff6262;
}

/* .row {
    padding: 40px 0;
    min-width: 980px;
    border-bottom: 1px solid #e4e4e4;
} */

.row-travels .navbar {
  margin-bottom: 20px;
  height: 36px;
  line-height: 36px;
  font-size: 16px;
}

.tn-nav {
  float: left;
}

.tn-nav li {
  float: left;
  display: inline;
  margin-right: 28px;
}

.tn-nav li a {
  color: #666;
}

.tn-nav .active a {
  font-size: 18px;
  color: #333;
}

.row-travels .navbar-sub {
  height: 28px;
  margin-bottom: 15px;
}

.tn-dropdown {
  float: left;
  width: 120px;
  display: inline;
  margin-right: 5px;
  line-height: 28px;
  color: #666;
  position: relative;
}

.tn-dropdown .dropdown-trigger {
  padding: 0 13px;
  height: 28px;
  position: relative;
  z-index: 2;
  line-height: 28px;
  cursor: pointer;
}

.tn-dropdown .dropdown-menu {
  position: absolute;
  top: 0;
  border: 1px solid #d6d6d6;
  padding-top: 26px;
  width: 118px;
  border-radius: 4px;
  font-size: 14px;
  background-color: #fff;
}

.tn-dropdown .icon-dropdown {
  position: absolute;
  top: 11px;
  right: 13px;
  width: 12px;
  height: 6px;
  background-image: url(../assets/images/index-sprites3.png);
  background-position: 0 -30px !important;
  overflow: hidden;
}

.tn-dropdown .dropdown-menu ul {
  display: none;
}

.tn-dropdown .dropdown-menu li {
  margin: 1px 0;
  height: 28px;
}

.tn-dropdown .dropdown-menu a {
  display: block;
  padding: 0 12px;
  color: #666;
  cursor: pointer;
}

.tn-dropdown .dropdown-menu a:hover,
.tn-dropdown .dropdown-menu .active,
.tn-dropdown .dropdown-menu .on {
  background-color: #eee;
  text-decoration: none;
}

.tn-item {
  padding: 15px 0;
  height: 150px;
}

.tn-image {
  float: left;
  width: 220px;
  height: 150px;
  overflow: hidden;
  position: relative;
}

.tn-wrapper {
  float: right;
  width: 758px;
  height: 150px;
}

.tn-item dl {
  height: 117px;
}

.tn-item dt {
  height: 26px;
  margin-bottom: 10px;
  font-size: 18px;
  line-height: 26px;
}

.tn-item dt a.tn-from-app {
  float: right;
  width: auto !important;
  padding: 0 7px;
  border: 1px solid #ff9d00;
  border-radius: 11px;
  height: 20px;
  line-height: 20px;
  font-size: 12px;
  color: #ff9d00;
  font-weight: bold;
  overflow: visible;
  background-color: #fff;
  cursor: text;
}

.tn-item dt a {
  width: 420px;
  height: 26px;
  display: block;
  color: #333;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tn-item dt a.tn-from-app + a {
  width: 360px;
}

.tn-item dt a.tn-from-app i {
  float: left;
  margin: 2px;
  width: 16px;
  height: 16px;
  background: url(../assets/images/index-sprites9.png) no-repeat -170px 0;
}

.tn-item dt a.tn-from-app img {
  position: absolute;
  right: -5px;
  top: 0;
  padding-top: 25px;
  width: 125px;
  display: none;
}

.tn-item dd {
  height: 60px;
  line-height: 20px;
  font-size: 14px;
  overflow: hidden;
}

.tn-item dd a {
  color: #666;
}

.tn-extra {
  height: 33px;
  overflow: hidden;
  line-height: 33px;
}

.tn-extra .tn-ding {
  float: right;
  color: #ff9d00;
  font-size: 14px;
  text-align: right;
}

.tn-extra span {
  display: inline-block;
}

.tn-extra .btn-ding {
  display: inline-block;
  float: right;
  margin-left: 8px;
  width: 38px;
  height: 33px;
  background-position: -60px 0 !important;
  overflow: hidden;
}

.tn-write .btn-add i,
.tn-extra .btn-ding,
.tn-extra .tn-place i,
.tn-extra .tn-nums i {
  background: url(../assets/images/index-sprites3.png) no-repeat;
}

.tn-extra .tn-ding em {
  font-style: normal;
}

.tn-extra .tn-user {
  margin-right: 10px;
}

.tn-extra .tn-user img {
  margin-right: 5px;
  width: 16px;
  height: 16px;
  overflow: hidden;
  border-radius: 50%;
  vertical-align: -3px;
}

.tn-extra .tn-nums {
  font-size: 14px;
  color: #999;
}

.tn-extra .tn-nums i {
  float: left;
  margin: 10px 5px 0 0;
  width: 18px;
  height: 14px;
  background-position: -30px -50px !important;
}

.row-placeList .bd ul {
  margin-right: -25px;
  *zoom: 1;
}

.row-placeList .item {
  float: left;
  width: 320px;
  height: 346px;
  display: inline;
  margin: 0 20px 30px 0;
}

.row-placeList .img {
  height: 200px;
  overflow: hidden;
  position: relative;
}

.row-placeList .caption {
  height: 125px;
  padding: 10px 20px;
  border: 1px solid #f2f2f2;
  border-top: 0 none;
}

.row-placeList dt {
  padding: 5px 0 12px;
  text-align: center;
  font-size: 14px;
  border-bottom: 1px solid #f5f5f5;
  line-height: 20px;
}

.row-placeList dd {
  height: 20px;
  margin-top: 15px;
  font-size: 14px;
  line-height: 20px;
  overflow: hidden;
}

.row-placeList dt a {
  display: block;
  color: #999;
}

.row-placeList dt strong {
  font-size: 24px;
  font-weight: normal;
  color: #333;
  line-height: 30px;
}

.row-placeList dt b {
  color: #ff9d00;
}

.row-placeList dd a {
  color: #666;
}

.row-placeList .divide {
  display: inline-block;
  width: 1px;
  height: 10px;
  background-color: #dadada;
  margin: 0 10px;
  overflow: hidden;
}

.row-placeList dt a:hover {
  text-decoration: none;
}

.row-placeList dd a:hover {
  color: #ff9d00;
}

.row-placeList .r-title {
  margin-bottom: 35px;
  text-align: left;
  font-size: 26px;
  color: #333;
  font-weight: normal;
  line-height: 30px;
}

.row-placeList .item:hover {
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
}

.row-placeList .item:hover strong {
  color: #ff9d00;
}

.tn-dropdown.dropdown-open {
  z-index: 5;
}

.tn-dropdown.dropdown-open .dropdown-trigger {
  color: #ff9d00;
}

.tn-dropdown.dropdown-open .dropdown-menu {
  border-color: #ff9d00;
}

.tn-dropdown.dropdown-open .dropdown-menu ul {
  display: block;
  margin: 6px 0;
  height: 240px;
}

.com-sel {
  line-height: 5rem;
  cursor: pointer; /*鼠标上移变成小手*/
}

.com-opt {
  padding-right: 1.8rem;
  border: none;
  outline: none;
  /*去掉默认的下拉三角
    appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;*/
  /*添加下拉三角图标
    background: url("/images/select.jpg") no-repeat right center transparent;*/
}
</style>
